<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>考试科目信息</title>
    <link type="text/css" rel="styleSheet"  th:href="@{../static/themes/icon.css}" />
    <link type="text/css" rel="styleSheet"  th:href="@{../static/themes/default/easyui.css}" />
    <script th:src="@{../static/js/jquery.js}"></script>
    <script th:src="@{../static/js/jquery.easyui.min.js}"></script>
    <script th:src="@{../static/js/easyui-lang-zh_CN.js}"></script>
    <script>
        var teacher={
            do:function (value,row,index) {
                return '<a class="delete" href="#">删除</a>  <a class="update" href="#">编辑</a>';
            }
        }
    </script>
    <style>
        .first{
            width: 100%;
            height: 95%;
        }
    </style>
</head>
<body class="first">
<!-按钮组-->
<div class="data">
    <a class="remove_id" th:href="@{#}">删除选中</a>
    <a class="add" th:href="@{#}">添加</a>
    <a class="update" th:href="@{#}">修改</a>
    <a class="delete" th:href="@{#}">删除</a>
    <hr/>
    <input class="search" type="text" name="keyword"/>

</div>
<div class="add_course" >
    <a th:href="@{#}">添加</a>
</div>
<div class="up" >
    <a th:href="@{#}">修改</a>
</div>
<div class="de" >
    <a th:href="@{#}">删除</a>
</div>
<table class="table_course">
    <thead>
    <tr>
        <th data-options="field:'major_id',width:100" align="center">专业号</th>
        <th data-options="field:'course_id',width:100" align="center">考试科目</th>
        <th data-options="field:'teacher_id',width:100" align="center">教师id</th>
        <th data-options="field:'teacher_name',width:100" align="center">姓名</th>
        <th data-options="field:'does',width:100,checkbox:true"></th>
    </tr>
    </thead>
</table>
<div class ="dialog_course" align="center">
    <form class="add_from" th:action="@{/add_course_log}" method="post">
        <table>
            <tr>
                <td>姓名</td>
                <td><input type="text" name="teacher_name" required= "required" /></td>
            </tr>
            <tr>
                <td>专业号</td>
                <td><input type="text" name="major_id" required= "required" /></td>
            </tr>
            <tr>
                <td>考试科目</td>
                <td><input type="text" name="course_id" required= "required" /></td>
            </tr>
            <tr>
                <td>教师id</td>
                <td><input type="text" name="teacher_id" required= "required" /></td>
            </tr>
        </table>
    </form>
</div>
<div class ="up_course" align="center">
    <form class="up_from" th:action="@{/up_course_log}" method="post">
        <table>
            <tr>
                <td>姓名</td>
                <td><input type="text" name="teacher_name" required= "required" /></td>
            </tr>
            <tr>
                <td>专业号</td>
                <td><input type="text" name="major_id" required= "required" /></td>
            </tr>
            <tr>
                <td>考试科目</td>
                <td><input type="text" name="course_id" required= "required" /></td>
            </tr>
            <tr>
                <td>教师id</td>
                <td><input type="text" name="teacher_id" required= "required" /></td>
            </tr>
        </table>
    </form>
</div>
<div class ="de_course" align="center">
    <form class="de_from" th:action="@{/de_course_log}" method="post">
        <table>
            <tr>
                <td>专业号</td>
                <td><input type="text" name="major_id" required= "required" id="major_id"/></td>
            </tr>
            <tr>
                <td>考试科目</td>
                <td><input type="text" name="course_id" required= "required" id="course_id"/></td>
            </tr>
            <tr>
                <td>教师id</td>
                <td><input type="text" name="teacher_id" required= "required" id="teacher_id"/></td>
            </tr>
        </table>
    </form>
</div>
<script>
    $(function () {
        $(".table_course").datagrid({
            title:"考试科目信息",
            iconCls:"icon-man",
            height:670,
            weight:1000,
            url:'/courseList',           //展示json数据
            toolbar: ".data",             //引用按钮组
            rownumbers: true,             //显示行号
            checkOnSelect:true,           //复选框选中才是真正的选中
            fitColumns:true,              //根据数据自适应列宽
            striped:true,                 //灰白相间
            pagination:true,               //开启分页

        });
        $(".add_course a").linkbutton({   //变成按钮
            iconCls:"icon-ok",
            onClick:function () {                             //提交数据
                $(".add_from").form('submit');                //通过from表单提交数据

            }

        });
        $(".up a").linkbutton({   //变成按钮
            iconCls:"icon-ok",
            onClick:function () {                            //提交数据
                $(".up_from").form('submit');                //通过from表单提交数据

            }


        });
        $(".de a").linkbutton({   //变成按钮
            iconCls:"icon-ok",
            onClick:function () {                            //提交数据
                $(".de_from").form('submit');                //通过from表单提交数据

            }


        });
        $(".remove_id").linkbutton({
            iconCls: "icon-remove",
            onClick: function () {                           //获得被选中的行数据
                var data = $(".table_course").datagrid('getChecked');
                var ids = "";
                for(var i=0;i<data.length;i++){
                    var id = data[i].course_id;
                    ids = ids +"."+id;

                }

                $.ajax({
                    url: "/deleteCourses",
                    type:"post",
                    data:ids,
                    dataType:"json",
                    success:function (json) {
                        console.log(json);
                        $(".table_course").datagrid('reload');         //加载当前页数据
                        $.messager.show({                               //提示信息
                            title: "提示",
                            msg:json.msg,
                        });
                    }
                });
            }
        });
        $(".add").linkbutton({
            iconCls: "icon-add",
            onClick:function () {
                $(".dialog_course").dialog({      //修改dialog的closed的值
                    closed: false,
                });
            }
        });
        $(".delete").linkbutton({
            iconCls:"icon-cancel",
            onClick:function () {
                $(".de_course").dialog({          //修改dialog的closed的值
                    closed: false,
                });
            }
        });
        $(".update").linkbutton({
            iconCls:"icon-edit",
            onClick:function () {
                $(".up_course").dialog({          //修改dialog的closed的值
                    closed: false,
                });
            }

        });

        $(".search").textbox({
            buttonIcon:"",                               //按钮图片
            buttonText:"搜索" ,                           //按钮文本内容
            onClickButton:function () {
                //获取输入值
                var keyword = $(".search").val();
                $.ajax({
                    url: "/keyCourses",
                    type:"post",
                    data:keyword,
                    success:function (json) {
                        console.log(json);
                        $(".table_course").datagrid({
                            url:'/keyCourseList',
                        });
                    }
                });
            }
        });
        $(".dialog_course").dialog({
            weight: 240,
            height: 220,
            title: "添加考试信息",
            iconCls:"icon-man",
            buttons:".add_course",
            closed: true,                 //初始关闭
        });
        $(".up_course").dialog({
            weight: 240,
            height: 220,
            title: "修改考试信息",
            iconCls:"icon-man",
            buttons:".up",
            closed: true,                 //初始关闭
        });
        $(".de_course").dialog({
            weight: 200,
            height: 180,
            title: "删除考试信息",
            iconCls:"icon-man",
            buttons:".de",
            closed: true,                 //初始关闭
        });
        $(".add_from").form({
            success:function (data) {
                console.log(data)
                $(".dialog_course").dialog({                   //修改dialog的closed的值关闭dialog
                    closed: true,
                });
                $(".table_course").datagrid('reload');         //加载当前页数据
                var json = JSON.parse(data);                    //提示操作信息
                $.messager.show({
                    title:"提示",
                    msg: json.msg,
                })
            }
        });
        $(".up_from").form({
            success:function (data) {
                $(".up_course").dialog({                   //修改dialog的closed的值关闭dialog
                    closed: true,
                });
                $(".table_course").datagrid('reload');         //加载当前页数据
                var json = JSON.parse(data);                    //提示操作信息
                $.messager.show({
                    title:"提示",
                    msg: json.msg,
                })
            }
        });
        $(".de_from").form({
            success:function (data) {
                $(".de_course").dialog({                   //修改dialog的closed的值关闭dialog
                    closed: true,
                });
                $(".table_course").datagrid('reload');         //加载当前页数据
                var json = JSON.parse(data);                    //提示操作信息
                $.messager.show({
                    title:"提示",
                    msg: json.msg,
                })
            }
        });
    })
</script>
<script>
    function test1() {
        $(".table_courser").datagrid('reload')  //重新加载当前页数据
    }
</script>
</body>
</html>